<template>
  <div style="text-align:center;margin:0 auto;padding:30px;">
  <div style="width: 300px;">
    <div class="custom-tree-container">
      <div class="block">
        <p> <el-button type="primary" @click="appendParent()">添加根父模块</el-button></p>
        <el-tree
          :data="data"
          node-key="id"
          accordion
          :expand-on-click-node="false"
          :render-content="renderContent"
          :props="defaultProps">
        </el-tree>
      </div>
    </div>
  </div>
  <el-dialog title="添加根父模块" :visible.sync="addParentshow">
    <el-form :model="addformParent">
       <el-form-item label="模块名">
         <el-input v-model="addformParent.moduleName" placeholder="模块名"></el-input>
       </el-form-item>
       <el-form-item label="小图标">
         <el-input v-model="addformParent.moduleIcon" placeholder="小图标"></el-input>
       </el-form-item>
       <el-form-item label="地址">
         <el-input v-model="addformParent.modulePath" placeholder="地址"></el-input>
       </el-form-item>
          <input v-model="addformParent.parentId" type="hidden" />
           <input v-model="addformParent.isChildNode" type="hidden" />
        <input v-model="addformParent.isParentNode" type="hidden" />
     </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addParent()">提 交</el-button>
        <el-button  @click="err()">取 消</el-button>
    </div>
  </el-dialog>
  <el-dialog title="添加模块" :visible.sync="addChildshow">
    <el-form :model="addformChild">
       <el-form-item label="模块名">
         <el-input v-model="addformChild.moduleName" placeholder="模块名"></el-input>
       </el-form-item>
       <el-form-item label="小图标">
         <el-input v-model="addformChild.moduleIcon" placeholder="小图标"></el-input>
       </el-form-item>
       <el-form-item label="地址">
         <el-input v-model="addformChild.modulePath" placeholder="地址"></el-input>
       </el-form-item>
     </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addChild()">提 交</el-button>
        <el-button  @click="err()">取 消</el-button>
    </div>
  </el-dialog>
  <el-dialog title="修改模块" :visible.sync="setModule">
    <el-form :model="setform">
       <el-form-item label="模块名">
         <el-input v-model="setform.moduleName" placeholder="模块名"></el-input>
       </el-form-item>
       <el-form-item label="所属父模块">
         <el-input v-model="setform.parentId" placeholder="父模块"></el-input>
       </el-form-item>
       <el-form-item label="小图标">
         <el-input v-model="setform.moduleIcon" placeholder="小图标"></el-input>
       </el-form-item>
       <el-form-item label="地址">
         <el-input v-model="setform.modulePath" placeholder="地址"></el-input>
       </el-form-item>
     </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="setPush()">提 交</el-button>
        <el-button  @click="err()">取 消</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
  import {getAll,add,set,del} from '@/api/module'
  export default {
  data() {
    return {
      data: [],
      datadiv: '',
      defaultProps: {
        id : 'id',
        children: 'children',
        label: 'label',
        href : 'href',
        icon : 'icon',
        isParentNode : 'isParentNode',
        isChildNode : 'isChildNode',
        parentId : 'parentId'
      },
     addformChild : {
       moduleName : '',
       moduleIcon : '',
       modulePath : '',
       parentId : '' ,
       isChildNode : 1,
       isParentNode : 0
     },
     addformParent : {
        moduleName : '',
        moduleIcon : '',
        modulePath : '',
        parentId : 0 ,
        isChildNode : 0,
        isParentNode : 1
      },
      setform : {
         id : '',
         moduleName : '',
         moduleIcon : '',
         modulePath : '',
         parentId : '' ,
         isChildNode : 0,
         isParentNode : 1
       },
      addChildshow : false,
      addParentshow : false,
      setModule : false,
    };
  },
 created() {
      this.getAllModule();
    },
    methods:{
      getAllModule(){
        return new Promise((resolve, reject) => {
          getAll({}).then(response => {
            const {data} = response
            this.data = data;
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
      addParent(){
        return new Promise((resolve, reject) => {
          add({
            'moduleName' : this.addformParent.moduleName,
            'moduleIcon' : this.addformParent.moduleIcon,
            'path' : this.addformParent.modulePath,
            'parentId' : this.addformParent.parentId ,
            'isChildNode' : this.addformParent.isChildNode,
            'isParentNode' : this.addformParent.isParentNode
          }).then(response => {
            const {count} = response
            const newChild = { id: count, label:  this.addformParent.moduleName, children: [] };
            this.$message({
                message: "添加成功",
               type: 'success',
               onClose:  () =>{
                  this.getAllModule();
                  this.err();
               }
            });
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
      addChild(){
        return new Promise((resolve, reject) => {
          add({
            'moduleName' : this.addformChild.moduleName,
            'moduleIcon' : this.addformChild.moduleIcon,
            'path' : this.addformChild.modulePath,
            'parentId' : this.addformChild.parentId ,
            'isChildNode' : this.addformChild.isChildNode,
            'isParentNode' : this.addformChild.isParentNode
          }).then(response => {
            const {count} = response
            const newChild = { id: count, label:  this.addformChild.moduleName, children: [] };
            if (!this.datadiv.children) {
              this.$set(data, 'children', []);
            }
            this.datadiv.children.push(newChild);
            this.$message({
                message: "添加成功",
               type: 'success',
               onClose:  () =>{
                  this.err();
                  this.init();
               }
            });
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
      setPush(){
        return new Promise((resolve, reject) => {
          set({
            'id' : this.setform.id,
            'moduleName' : this.setform.moduleName,
            'moduleIcon' : this.setform.moduleIcon,
            'modulePath' : this.setform.modulePath,
            'parentId' : this.setform.parentId ,
            'isChildNode' : this.setform.isChildNode,
            'isParentNode' : this.setform.isParentNode
          }).then(response => {
            this.$message({
                message: "修改成功",
               type: 'success',
               onClose:  () =>{
                  this.err();
                  this.getAllModule();
               }
            });
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
      remove(node, data) {
        this.$confirm('此操作将永久删除该模块, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(response => {
                      if(data.children.length!=0){
                        this.$message({
                            message: "模块下有子模块",
                           type: 'error',
                        });
                        return ;
                      }
                return new Promise((resolve, reject)=>{
                    del({
                      'id' : data.id
                    }).then(response=>{
                      const parent = node.parent;
                      const children = parent.data.children || parent.data;
                      const index = children.findIndex(d => d.id === data.id);
                      children.splice(index, 1);
                      this.$message({
                          message: "删除成功",
                         type: 'success',
                         onClose:  () =>{
                         }
                      });
                      resolve()
                    })
                })
          }).catch(error => {
            reject(error)
          })
      },
      update(data){
        this.setform.id=data.id;
        this.setform.moduleName=data.label;
        this.setform.moduleIcon=data.icon;
        this.setform.modulePath=data.href;
        this.setform.parentId=data.parentId;
        this.setform.isChildNode=data.isChildNode;
        this.setform.isParentNode=data.isParentNode;
        this.setModule=true;
      },
      //点击添加模块让表单显示
      append(data) {
        this.addformChild=[];
        this.addChildshow=true;
        this.addformChild.parentId=data.id;
        this.addformChild.isChildNode=1;
        this.addformChild.isParentNode=0;
        this.datadiv=data;
      },
      //点击添加根模块让表单显示
      appendParent(data) {
        this.addformParent=[];
        this.addParentshow=true;
        this.addformParent.isChildNode=0;
        this.addformParent.isParentNode=1;
        this.addformParent.parentId=0;
      },
      //取消让弹框隐藏
       err(){
          this.addChildshow=false;
          this.addParentshow=false;
          this.setModule=false;
       },
      //重新渲染 tree
      init(){
        this.data = [...this.data]
      },
      renderContent(h, { node, data, store }) {
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
            <span>
              <el-button type="text" icon="el-icon-plus" on-click={ () => this.append(data) }> </el-button>
              <el-button type="text" icon="el-icon-edit" on-click={ () => this.update(data) }> </el-button>
              <el-button type="text" icon="el-icon-delete" on-click={ () => this.remove(node, data) }></el-button>
            </span>
          </span>);
      }
    }
}

</script>

<style>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
[class^="el-icon-fa"], [class*=" el-icon-fa"] {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome !important;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
